<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的订单</title>

    <link rel="stylesheet" href="../../plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/adopt/indexCss.css" type="text/css">
    <style>
        .bigbox {
            margin: auto;
            margin-top: 20px;
        }

        td {
            /* border:1px solid lightgrey; */
            width: 200px;
        }

        .milder {
            margin-top: 10px;
        }

        .milder td {
            border: 1px solid lightgrey;

            /* height:30px; */
            padding: 10px;
            align-self: auto;
        }
    </style>
</head>
<body>

<!-- 导航栏 -->
<ul class="layui-nav" id="header">
    <div class="container">
        <li class="layui-nav-item"><a href="/MagicFrog/index.html"><b style="font-size: 20px;">膜蛤猫舍</b></a></li>
        <li class="layui-nav-item layui-this"><a href="/MagicFrog/views/foster/foster.html">寄养猫咪</a></li>
        <li class="layui-nav-item"><a href="/MagicFrog/views/adopt/adoptCat.html">领养猫咪</a></li>
        <li class="layui-nav-item"><a href="/MagicFrog/views/personal/aboutus.html">关于我们</a></li>
        <ul class="navbar-right">
            <li class="layui-nav-item">
                <a href="/MagicFrog/views/personal/personal-center.html">个人中心</a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="/MagicFrog/views/personal/personal-center.html"><img src="//t.cn/RCzsdCq"
                                                                              class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                    <dd><a href="#">修改信息</a></dd>
                    <dd><a href="#">安全管理</a></dd>
                    <dd><a href="#">退了</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="#contactus">联系我们</a></li>
        </ul>
    </div>
</ul>
<div class="bigbox">
    <div class="header">
        <div class="container">

            <!-- 标题----开始 -->
            <div class="headerL" style="float:left;"><span><h4>我的订单</h4></span></div>
            <div class="headerR" style="float:right;"><a href="personal-center.html"><img
                    src="../../imgs/personal-head.gif" id="pic" style="border-radius: 50%;width:30px;height:30px;"></a>
            </div>

            <!-- 标题---结束 -->

            <!-- 水平线---开始 -->
            <div class="hr1" style="margin-top:50px;">
                <hr>
            </div>
            <!-- 水平线---结束 -->
            <!-- 查询----开始 -->
            <div class="search" style="float:right;">
                <input type="text" placeholder="商品名称/商品编号/订单编号">
                <button>查询</button>
            </div>
            <!-- 查询----结束 -->
        </div>
    </div>

    <div class="container" style="margin-top:10px;">
        <!-- 按钮----开始 -->
        <div class="row">
            <button>
                全部订单
            </button>
            <button>已付款</button>
            <button>待付款</button>
        </div>
        <!-- 按钮--结束 -->

        <!-- 水平线---开始 -->
        <div class="hr2" style="margin-top:3px;">
            <hr>
        </div>
        <!-- 水平线---结束 -->

        <!-- 订单展示---开始 -->
        <div class="row">
            <div class="col-md-12">
                <table>
                    <tr>
                        <td>猫咪</td>
                        <td>种类</td>
                        <td>数量</td>
                        <td>售后</td>
                        <td>订单金额</td>
                        <td>交易状态</td>
                        <td>操作</td>
                    </tr>
                    <!-- 所有合并的列----开始 -->
                    <tr>
                        <td colspan="7" style="height:10px;"></td>
                    </tr>

                    <tr>
                        <td colspan="7">
                            <input type="checkbox" value="" id="cks" onclick="selectAll(this)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全选
                            <button type="button" onclick="removeAnyLine()"><a>删除选中编号</a></button>
                            <!-- <a>删除选中编号</a> -->
                            <a>批量确认收货</a>
                        </td>
                    </tr>
                </table>
                <!-- 列的合并---结束 -->
                <div class="milder">
                    <table>
                        <tr>
                            <td colspan="7">
                                <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>订单编号:123456</span>
                                <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                            </td>
                        </tr>

                        <tr>
                            <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                            <td>小猫咪</td>
                            <td>1</td>
                            <td>-</td>
                            <td>387$</td>
                            <td>已付款<br>
                                <a>订单详情</a>
                            </td>
                            <td>取消订单</td>
                        </tr>
                    </table>


                    <table>
                        <tr>
                            <td colspan="7">
                                <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>订单编号:123456</span>
                                <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                            </td>
                        </tr>

                        <tr>
                            <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                            <td>小猫咪</td>
                            <td>1</td>
                            <td>-</td>
                            <td>387$</td>
                            <td>已付款<br>
                                <a>订单详情</a>
                            </td>
                            <td>取消订单</td>
                        </tr>
                    </table>

                    <table>
                        <tr>
                            <td colspan="7">
                                <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>订单编号:123456</span>
                                <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                            </td>
                        </tr>

                        <tr>
                            <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                            <td>小猫咪</td>
                            <td>1</td>
                            <td>-</td>
                            <td>387$</td>
                            <td>已付款<br>
                                <a>订单详情</a>
                            </td>
                            <td>取消订单</td>
                        </tr>
                    </table>

                    <table>
                        <tr>
                            <td colspan="7">
                                <input type="checkbox" value="" name="ck">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>订单编号:123456</span>
                                <span>成交时间:2019-08-12&nbsp;&nbsp;&nbsp;&nbsp;12:23:07</span>
                            </td>
                        </tr>

                        <tr>
                            <td><img src="../../imgs/24.jpg" style="width:50px;height:50px;border-radius: 50%;"></td>
                            <td>小猫咪</td>
                            <td>1</td>
                            <td>-</td>
                            <td>387$</td>
                            <td>已付款<br>
                                <a>订单详情</a>
                            </td>
                            <td>取消订单</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 订单展示----结束 -->
    </div>

</div>

<div class="container">
    <div>
        <h3 id="welcome">联系我们</h3>
    </div>
    <div class="col-md-4">
        <h4>
            <i class="	glyphicon glyphicon-map-marker"></i>&nbsp;&nbsp;Location
        </h4>
        <p>345 Setwant natrer,</p>
        <p>Metropolitan, Italy.</p>
    </div>
    <div class="col-md-4">
        <h4>
            <i class="glyphicon glyphicon-earphone"></i>&nbsp;&nbsp;PHONE
        </h4>
        <p>+1(401) 1234 567.</p>
        <p>+1(804) 4261 150.</p>
    </div>
    <div class="col-md-4">
        <h4>
            <i class="glyphicon glyphicon-envelope"></i>&nbsp;&nbsp;E-MAIL
        </h4>
        <p>
            <a href="mailto:info@example.com">Example1@gmail.com</a>
        </p>
        <p>
            <a href="mailto:info@example.com">Example2@gmail.com</a>
        </p>
    </div>
</div>
<script>
    var pic = document.getElementById("pic");
    pic.onmouseover = function () {
        this.style.width = 70 + 'px';
        this.style.height = 70 + 'px';
    }
    pic.onmouseout = function () {
        this.style.width = 30 + 'px';
        this.style.height = 30 + 'px';
    }
</script>
<script>
    function selectAll(obj) {
        //获取内容行所有的checkbox
        var cks = document.getElementsByName("ck");

        if (obj.checked) {
            //遍历所有的cks
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = true;
            }
        } else {
            for (var i = 0; i < cks.length; i++) {
                cks[i].checked = false;
            }
        }
    }

    // //删除任意行
    function removeAnyLine() {
        //找出勾选的行
        var cks = document.getElementsByName("ck");

        //定义一个计数器
        var count = 0;

        for (var i = 0; i < cks.length; i++) {
            // 判断checkbox是否勾选
            if (cks[i].checked) {
                count++;
            }
        }

        if (count == 0) {
            alert("请您先勾选!");
            return;
        }

        //说明已经勾选了
        var flag = confirm("确定删除吗?");

        if (flag) {

            //下标 - 删除 - 保险操作 - 倒过来.
            for (var i = cks.length - 1; i >= 0; i--) {
                if (cks[i].checked) {
                    //从tbody中剔除cks[i]所在的行tr
                    var tbody = cks[i].parentElement.parentElement.parentElement;
                    //删除tr
                    tbody.remove();
                }
            }

        }
    }

</script>


<script src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/layui/layui.js" charset="utf-8"></script>

</body>
</html>